<template>
  <view class="page-main" style="padding-top: 0;">
    
    <view class="body-main">
      <view class="device-status_bar"></view>
      <view class="form-main">
        <view class="part1" style="height: ;">
          <!--		表单行 START		-->
          <view class="row">
            <view class="row-name-left">
              <picker class="shared-picker input-wrapper" style="width: 90px !important;"  @change="changeisusername" :value="value" :range="isusernamelist"
                range-key="name">
                <view class="uni-input" style="max-width: 90px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{isusernamelist[isusername]&&isusernamelist[isusername].name}}</view>
                <view class="arrow-down-triangle" style="margin-left: 5px;"></view>
              </picker>
            </view><strong></strong>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <input v-show="isusername!=0" v-model="username" placeholder-style="color: #969799" class="uni-input" placeholder="请输入公司名称" />
                <input v-show="isusername==0" v-model="username" placeholder-style="color: #969799" class="uni-input" placeholder="请输入客户姓名" />
              </view>
            </view>
          </view>
          <view class="row" v-show="isusername==0">
            <view class="row-name-left">身份证</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <input v-model="numbe_id" type="text" placeholder-style="color: #969799" class="uni-input" placeholder="请输入身份证(非必填)" />
              </view>
            </view>
          </view>
          <view class="row" v-show="isusername!=0">
            <view class="row-name-left">营业执照</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <input v-model="numbe_id" type="number" placeholder-style="color: #969799" class="uni-input" placeholder="请输入营业执照" />
              </view>
            </view>
          </view>
          <!--		表单行 END		-->
          
          <view class="row">
            <view class="row-name-left">常用手机号</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <input v-model="phone" maxlength="11" placeholder-style="color: #969799" class="uni-input" placeholder="请输入手机号" />
              </view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left" >备用手机号</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <input v-model="sparephone" maxlength="11" placeholder-style="color: #969799" class="uni-input" placeholder="请输入手机号(非必填)" />
              </view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">微信</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <input v-model="wechat" @blur="blur"  placeholder-style="color: #969799" class="uni-input" placeholder="请输入客户微信(非必填)" />
              </view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">客户类型</view>
            <view class="right-part">
              <picker class="shared-picker input-wrapper" style="max-width: 190px;" @change="changeintent_clientlist" :value="intent_clientindex" :range="intent_clientlist" range-key="name">
                <view class="uni-input" style="max-width: 180px;">{{intent_clientlist[intent_clientindex].name}}<view class="arrow-down-triangle"></view></view>
                <view class="arrow-down-triangle"></view>
              </picker>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">客户来源</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <view  class="uni-input">线下</view>
              </view>
            </view>
          </view>
          <!--		2倍高度 表单行 START		-->
          <view class=" double-height-row" style="height: 200rpx;">
            <view class="row">
              <view class="row-name-left">意向区域</view>
              <view class="right-part"> </view>
            </view>
            <view class="row" >
              <view class="right-part">
                <picker class="shared-picker input-wrapper" style="width: 100px !important;"  @change="changePro" :value="value" :range="prolist"
                  range-key="name">
                  <view class="uni-input" style="max-width: 90px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{prolist[value]&&prolist[value].name}}</view>
                  <view class="arrow-down-triangle" style="margin-left: 5px;"></view>
                </picker>
                <picker class="shared-picker input-wrapper" style="width: 100px !important;margin-left: 15px;"  @change="changeCity" :value="value2" :range="citys"
                  range-key="name">
                  <view class="uni-input" style="max-width: 90px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{citys[value2]&&citys[value2].name}}</view>
                  <view class="arrow-down-triangle"></view>
                </picker>
                <picker class="shared-picker input-wrapper" style="width: 100px !important;margin-left: 15px;"  @change="changeArea" :value="value3" :range="areas"
                  range-key="name">
                  <view class="uni-input" style="max-width: 90px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{areas[value3]&&areas[value3].name}}</view>
                  <view class="arrow-down-triangle"></view>
                </picker>
              </view>
            </view>
          </view>
          <!--		2倍高度 表单行 END		-->
          <view class="row">
            <view class="row-name-left">客户意向面积</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <input v-model="areass" type="number"  placeholder-style="color: #969799" class="uni-input" placeholder="请输入意向面积" />
              </view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">客户意向价格</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <input v-model="price" type="number" placeholder-style="color: #969799" class="uni-input" placeholder="请输入意向价格" />
              </view>
            </view>
          </view>
        </view>
        <view class="part2">
          <view class="part2-title">备注</view>
          <u-input v-model="remark" height="318" type="textarea" :border="true" placeholder="提炼2-3个点，输入字数不要超过140字。" />
          <button class="blue-wide-button" @tap="commit">确定</button>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  import {TOAST_DURATION} from '@/util/misc'
  import {
    picker
  } from "@/util/reuse/picker"
  import {
    imageMixin
  } from "@/util/reuse/imageMixin"

  export default {
    mixins: [picker, imageMixin],
    data() {
      return {
        // 图片上传相关 start:
        isusername:0,
        numbe_id:'',
        isusernamelist:[{
          value:0,
          name:'姓名'
        },{
          value:2,
          name:'公司名称'
        }],
        idcard:'',
        maxCount: 15,
        areass:'',
        price:'',
        intent_from:'',
        // 图片上传相关 end:
        username:'',
        wechat:'',
        phone:'',
        sparephone:'',
        site:'',
        remark:'',
        purpose:'',
        imageList: [],
        value:0,
        value2:0,
        value3:0,
        index:0,
        clienttypeindex:0,
        intent_clientindex:0,
        clienttypelist:[{
          value:0,
          name:'线上客户'
        },{
          value:1,
          name:'线下客户'
        }],
        typelist:[{
          value:0,
          name:'请选择客户意向'
        },{
          value:1,
          name:'写字楼'
        },{
          value:2,
          name:'公寓'
        },{
          value:3,
          name:'商业店铺'
        },{
          value:4,
          name:'商品房'
        },{
          value:5,
          name:'酒店'
        }],
        intent_clientlist:[{
          value:0,
          name:'意向客户'
        },{
          value:1,
          name:'普通客户'
        },{
          value:2,
          name:'合作客户'
        }],
        houselist:[],
        houselistindex:0
      }
    },
    onShow(){
    },
    computed:{
      //
      prolist(){
        return this.$store.state.prolist
      },
      citys() {
        if (this.prolist.length != 0) {
          return this.prolist[this.value].children;
        } else {
          return []
        }
      },
      areas() {
        if (this.prolist.length != 0) {
          console.log('children',this.citys[this.value2].children)
          return [{name:'全部'},...this.citys[this.value2].children];
        } else {
          return []
        }
      },
    },

    methods: {
      blur(){
        this.wechat = this.wechat.replace(/[^a-zA-Z0-9]/g,'')
        console.log('blur',this.wechat)
      },
      commit(){
        if(this.username&&this.price&&this.areass&&this.remark
        ){
          let fromData = {
            user_name:this.username,
            wechat_number:this.wechat,
            phone:this.phone,
            intent_client:this.intent_clientindex+1,
            province:this.prolist[this.value].name,
            city:this.citys[this.value2].name,
            area:(this.areas[this.value3].name=='全部')?null:this.areas[this.value3].name,
            remark:this.remark,
            phone_b:this.sparephone,
            intent_price:this.price,
            intent_areas:this.areass,
            is_web:1,
            number_id:this.numbe_id,
            buyer_type:this.isusername+1
          }
          uni.request({
           url:`${this.$http}/api/merchant/client_update`,
           method:"POST",
           header:{
            Authorization:'Bearer ' + this.$store.state.token
           },
           data:fromData,
           complete: (res) => {
             console.log('res',res.data);
             if(res.data.code==200){
               uni.showToast({
                 title: '录入成功',
                 position: 'top',
                 icon: 'none',
                 duration: TOAST_DURATION
               });
               Object.assign(this.$data, this.$options.data())
             }else if(res.data.code == 402 || res.data.code == 506){
                setTimeout(()=>{
                  this.$logout(res.data.msg);
                },1500)
              }else{
               uni.showToast({
                 title: res.data.msg,
                 position: 'top',
                 icon: 'none',
                 duration: TOAST_DURATION
               });
             }
           }
         })
        }else{
          uni.showToast({
            title: str.test(this.phone)?'请检查输入是否完整':'请输入正确手机号',
            position: 'top',
            icon: 'none',
            duration: TOAST_DURATION
          });
        }
       
      },
      changehouselist(e){
        this.houselistindex = e.target.value
      },
      changetypelist(e){
        this.index = e.target.value
      },
      changeintent_clientlist(e){
        this.intent_clientindex = e.target.value
      },
      changeisusername(e){
        this.isusername = e.target.value
      },
      changeclienttypeindexlist(e){
        this.clienttypeindex = e.target.value;
        this.sparephone = ''
      },
      changePro(e) {
        this.value = e.target.value
        this.value2 = 0;
        this.value3 = 0;
      },
      changeCity(e) {
        this.value2 = e.target.value
        this.value3 = 0;
      },
      changeArea(e) {
        this.value3 = e.target.value
      },
      chooseImage: async function() {
        // #ifdef APP-PLUS
        // TODO 选择相机或相册时 需要弹出actionsheet，目前无法获得是相机还是相册，在失败回调中处理
        if (this.sourceTypeIndex !== 2) {
          let status = await this.checkPermission();
          if (status !== 1) {
            return;
          }
        }
        // #endif

        if (this.imageList.length === 9) {
          let isContinue = await this.isFullImg();
          console.log("是否继续?", isContinue);
          if (!isContinue) {
            return;
          }
        }
        let _this = this;
        uni.chooseImage({
          sourceType: _this.sourceType[this.sourceTypeIndex],
          sizeType: _this.sizeType[this.sizeTypeIndex],
          count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[
            this.countIndex],
          success: (res) => {
            this.imageList = this.imageList.concat(res.tempFilePaths);
          },
          fail: (err) => {
            // #ifdef APP-PLUS
            if (err['code'] && err.code !== 0 && this.sourceTypeIndex === 2) {
              this.checkPermission(err.code);
            }
            // #endif
            // #ifdef MP
            uni.getSetting({
              success: (res) => {
                let authStatus = false;
                switch (this.sourceTypeIndex) {
                  case 0:
                    authStatus = res.authSetting['scope.camera'];
                    break;
                  case 1:
                    authStatus = res.authSetting['scope.album'];
                    break;
                  case 2:
                    authStatus = res.authSetting['scope.album'] && res.authSetting['scope.camera'];
                    break;
                  default:
                    break;
                }
                if (!authStatus) {
                  uni.showModal({
                    title: '授权失败',
                    content: 'Hello uni-app需要从您的相机或相册获取图片，请在设置界面打开相关权限',
                    success: (res) => {
                      if (res.confirm) {
                        uni.openSetting()
                      }
                    }
                  })
                }
              }
            })
            // #endif
          }
        })
      },
      isFullImg: function() {
        return new Promise((res) => {
          uni.showModal({
            content: "已经有9张图片了,是否清空现有图片？",
            success: (e) => {
              if (e.confirm) {
                this.imageList = [];
                res(true);
              } else {
                res(false)
              }
            },
            fail: () => {
              res(false)
            }
          })
        })
      },
      previewImage: function(e) {
        var current = e.target.dataset.src
        uni.previewImage({
          current: current,
          urls: this.imageList
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/styles/global";
  /*@import "src/uview-ui/common/demo.scss";*/
  @import "@/uview-ui/index.scss";

  .page-main {
    min-height: 100vh;
    background-color: $greyBackgroundColor;
    @include center;
    padding-top: 88rpx;
    padding-bottom: 30rpx;

    .expand-housing-nav-bar {
      margin-bottom: 30rpx;
    }

    .body-main {
      .form-main {
        width: 686rpx;
        min-height: 1378rpx;
        background-color: #ffffff;
        border-radius: 8rpx;
        padding: 30rpx;

        .part1,
        .part2 {
          .row {
            width: 100%;
            height: 104rpx;
            @include bottomGreyBorder;
            display: flex;
            justify-content: space-between;

            .row-name-left {
              height: 100%;
              align-items: center;
              display: flex;
              width: 190rpx;
              font-size: 28rpx;
            }

            .right-part {
              color: #bdc4ce;
              height: 100%;
              width: 450rpx;
              /*background-color: #D8D8D8;*/
              display: flex;
              align-items: center;

              .uni-input {
                width: 430rpx;
                height: 48rpx;
                font-size: 28rpx;
                color: #353535;

              }

              .input-wrapper {
                width: 100%;

                .uni-input {
                  max-width: 80rpx;
                  @include ellipsis;
                  display: flex;
                  align-items: center;
                }
              }
            }
          }

          .double-height-row {
            height: 212rpx;
            display: flex;
            flex-direction: column;
            width: 100%;

            .input-wrapper {
              width: 120rpx !important;
              margin-left: 90rpx;
              display: flex;
              align-items: center;

              &:first-child {
                margin-left: 0rpx;

              }

            }
          }

        }

        .part2 {
          margin-top: 48rpx;

          .part2-title {
            width: 100%;
            height: 48rpx;
            font-weight: bold;
            font-size: 28rpx;
            line-height: 48rpx;
            color: #3d444c;
            margin-bottom: 24rpx;
          }

          .part2-desc {
            width: 442rpx;
            height: 48rpx;
            font-size: 24rpx;
            line-height: 48rpx;
            letter-spacing: 0rpx;
            color: #969799;
          }

          .blue-wide-button {
            width: 448rpx;
            margin-top: 48rpx;
          }

        }

      }
    }


  }
</style>

<style lang="scss">
  @import "../assets/styles/global";

  // 内有arrow
  .shared-picker {
    position: relative;
    .triangle-down-arrow,
    .arrow-down-triangle {
      width: 20rpx;
      height: 20rpx;
      @include contain-no-repeat-center;
      background-image: url("@/static/images/arrow.png");
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10rpx;
    }

    .arrow-down-triangle {
      width: 12rpx;
      height: 12rpx;
      margin-top: -6rpx;
      background-image: url("@/static/images/record/triangle-arrow@3x.png");

    }

  }
</style>
